Redesign playground, prettify JSON result#28
Conversation
There was a problem hiding this comment.
Pull request overview
This PR redesigns the playground layout from a three-pane horizontal split with a fixed footer to a more flexible layout with an expression pane at the top and a resizable bottom area that splits horizontally between context and results. The changes also add JSON syntax highlighting to prettify the display of evaluation results.
Changes:
- Restructured the layout from a side-by-side expression/context split with a footer to a top expression pane with a horizontally split bottom area (context left, results right)
- Renamed the resizer from
#resizerto#verticalResizerand updated its logic to resize the context/results split - Added JSON syntax highlighting with color-coded display for different JSON types (keys, strings, numbers, booleans, null)
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| samples/language-service-sample/styles.css | Added new layout CSS for workArea, expressionPane, bottomArea, contextPane, and resultsPane; renamed resizer to verticalResizer; added JSON syntax highlighting color classes for both light and dark themes |
| samples/language-service-sample/index.html | Restructured the DOM from a three-column layout with footer to a nested layout with expression pane at top and horizontally split context/results at bottom; moved results from footer into resultsPane |
| samples/language-service-sample/app.js | Updated resizer logic to work with new layout structure; added syntaxHighlightJson function; modified showResult to display results with syntax highlighting using innerHTML |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| typeInfo = 'Type: number'; | ||
| isJson = true; | ||
| } else if (typeof result === 'string') { | ||
| displayValue = `<span class="json-string">"${result}"</span>`; |
There was a problem hiding this comment.
XSS vulnerability: String results are not HTML-escaped before being inserted into the DOM via innerHTML. If an expression evaluates to a string containing HTML special characters like <script>alert('xss')</script>, it will be executed as HTML. The string should be HTML-escaped before wrapping it in the span tag, similar to how it's done in the syntaxHighlightJson function on line 425.
| const mainContent = document.getElementById('mainContent'); | ||
| const resizer = document.getElementById('verticalResizer'); | ||
| const contextPane = document.getElementById('contextPane'); | ||
| const resultsPane = document.getElementById('resultsPane'); |
There was a problem hiding this comment.
Unused variable resultsPane.
| const resultsPane = document.getElementById('resultsPane'); |
No description provided.